<template>
	<view class="columnbox wdh-100 content">
		<view class="search-box rowbox">
			<view class="rowbox input-box spb">
				<view class="rowbox">
					<u-icon name="search" size="40rpx" color="#828282"></u-icon>
					<input v-model="searchvalue" confirm-type="search" @confirm="searchInfo" placeholder="请输入昵称或手机号" />
				</view>
				<u-icon v-if="searchflag" @click="resetSearch" name="close-circle-fill" size="32rpx"
					color="#a4a3a5"></u-icon>
			</view>
		</view>
		<view style="width: 100%;height: 140rpx;"></view>
		<view @click="showDetail(item.id)" v-for="(item,index) in list " :key='index' class="columnbox one-user">
			<view class="rowbox wdh-100 spb">
				<view class="rowbox">
					<image :src="item.logo" mode="aspectFill" class="user-img"></image>
					<view class="columnbox als">
						<view class="nickname">{{item.nickname}}</view>
						<view class="userphone">{{item.phone}}</view>
					</view>
				</view>
				<view class="">余额：¥{{item.price}}</view>
			</view>
		</view>
		<view class="weekNotice" v-if="showWeekNotice">
			<view class="">
				{{buymsg}}
			</view>
			<view class="btncont">
				<u-button v-if="!isIos" type="primary" size="mini" text="续费" @click="handleShowAndrRenw"></u-button>
				<u-button v-if="isIos" type="primary" size="mini" text="联系客服" @click="handleKefu"></u-button>
			</view>
		</view>
		<IosKefu :show="showIosKefu" :type="matype" @close="closeIosKefu"></IosKefu>
		<AndrTaocan :show="showAndrTaocan" :taocanid="7" @close="closeAndrTaocan" @refsh="handlerefsh"></AndrTaocan>
	</view>
</template>

<script>
	import getdate from '@/utils/time.js'
	import formatNumber from '@/utils/formatNumber.js'
	import IosKefu from '@/components/ioskefu.vue'
	import AndrTaocan from '@/components/andrtaocan.vue'
	export default {
		components: {
			IosKefu,
			AndrTaocan
		},
		data() {
			return {
				buymsg: '',
				showAndrTaocan: false,
				matype: '',
				showIosKefu: false,
				isIos: false,
				showWeekNotice: false,
				list: [],
				pageNo: 1,
				total: 0,
				searchvalue: '',
				searchflag: ''
			};
		},
		onLoad() {
			this.getInfo()
		},
		onShow() {
			const info = wx.getSystemInfoSync()
			this.isIos = !(info.system.indexOf('Android') > -1)
			this.getStrorInfo()
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.pageNo++
				this.getInfo()
			}
		},
		methods: {
			handlerefsh() {
				this.getStrorInfo()
			},
			handleShowAndrRenw() {
				this.showAndrTaocan = true
			},
			closeAndrTaocan() {
				this.showAndrTaocan = false
			},
			handleKefu() {
				this.showIosKefu = true
				this.matype = 'hyimg'
			},
			closeIosKefu() {
				this.showIosKefu = false
			},
			getStrorInfo() {
				this.$req.post('/shanghu/userInfo', {
					uid: uni.getStorageSync('uid')
				}).then((res) => {
					let data = res.data.data
					this.buymsg = data.hytitle
					if (data.hyweak == 2) {
						this.showWeekNotice = true
					}
					if (data.hystrong === 2) {
						let flag = true
						if (uni.getStorageSync('viptaoendtime')) {
							var ctime = new Date().getTime()
							if (ctime > uni.getStorageSync('viptaoendtime')) {
								uni.removeStorageSync('viptaoendtime')
							} else {
								flag = false
							}
						}
						if (this.isIos) {
							this.matype = 'hyimg'
							this.showIosKefu = flag
						} else {
							this.showAndrTaocan = flag
						}

						if (!uni.getStorageSync('viptaoendtime')) {
							let endTime = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 *
								60 *
								1000 - 1); // 当天23:59
							uni.setStorageSync('viptaoendtime', endTime)
						}
					}

				})
			},
			resetSearch() {
				this.searchflag = false
				this.searchvalue = ''
				this.pageNo = 1
				this.getInfo()
			},
			searchInfo() {
				if (this.searchvalue == '') {
					uni.showToast({
						title: '请输入搜索内容',
						icon: 'none'
					})
				} else {
					this.searchflag = true
					this.list = []
					this.pageNo = 1
					this.getInfo()
				}
			},
			showDetail(id) {
				uni.navigateTo({
					url: './detail?id=' + id
				})
			},
			getInfo() {
				console.log()
				this.$req.post('/shanghu/wallets', {
					shanghuid: uni.getStorageSync('userInfo').shanghuid,
					pageNo: this.pageNo,
					pageSize: 10,
					search: this.searchflag ? this.searchvalue : ''
				}).then(res => {
					this.list = this.list.concat(res.data.data.data)
					this.total = res.data.data.totalCount
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.weekNotice {
		padding: 15rpx 30rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 100;
		width: 100%;
		background-color: #fdf6ec;
		color: #f9ae3d;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.content {
		min-height: 100vh;
		background: #f6f6f6;
		justify-content: flex-start;
		padding: 0 32rpx 60rpx 32rpx;
	}

	.one-user {
		width: 100%;
		background: #fff;
		padding: 32rpx 32rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}

	.user-img {
		width: 70rpx;
		height: 70rpx;
		border-radius: 100rpx;
		margin-right: 20rpx;
	}

	.nickname {
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.userphone {
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.search-box {
		width: 100%;
		background: #fff;
		margin-bottom: 20rpx;
		padding: 20rpx 20rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
	}

	.input-box {
		background: #f3f3fa;
		width: 100%;
		height: 70rpx;
		border-radius: 20rpx;
		padding: 0 20rpx;

		input {
			font-size: 28rpx;
			margin-left: 10rpx;
			width: 400rpx;
		}
	}
</style>